<template>
  <up-popup
    v-model:show="visible"
    mode="center"
    :round="20"
    :close-on-click-overlay="false"
    :custom-style="{ width: '680rpx' }"
    @close="handleClose"
  >
    <view class="account-selector">
      <view class="selector-header">
        <text class="selector-title">
          请选择登录商户
        </text>
        <view class="title-underline" />
      </view>

      <view class="account-list">
        <view
          v-for="account in accounts"
          :key="account.id"
          class="account-item"
          :class="{ selected: selectedAccountId === account.id }"
          @tap="toggleAccountSelection(account)"
        >
          <view class="account-avatar">
            <text class="avatar-text">
              店
            </text>
          </view>
          <view class="account-info">
            <view v-if="account.dangkou_name" class="account-store">
              {{ account.dangkou_name }}
            </view>
            <view v-else class="account-store no-store">
              无店铺名称
            </view>
            <view class="account-mobile">
              {{ account.mobile }}
            </view>
          </view>
          <view v-if="selectedAccountId === account.id" class="account-check">
            <text class="check-icon">
              ✓
            </text>
          </view>
        </view>
      </view>

      <view class="selector-actions">
        <view class="action-btn cancel-btn" @tap="handleCancel">
          取消
        </view>
        <view class="action-btn confirm-btn" @tap="handleConfirm">
          确定登录
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import type { AccountOption } from '@/api/user/types';

interface Props {
  show: boolean;
  accounts: AccountOption[];
}

interface Emits {
  (e: 'update:show', value: boolean): void;
  (e: 'confirm', account: AccountOption): void;
  (e: 'cancel'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
watch(props.show, (newShow) => {
  console.log('AccountSelector show 状态变化:', newShow);
});

const visible = computed({
  get: () => {
    console.log('AccountSelector visible get:', props.show);
    return props.show;
  },
  set: (value) => {
    console.log('AccountSelector visible set:', value);
    emit('update:show', value);
  },
});

const selectedAccountId = ref<number | null>(null);

// 监听账户列表变化，默认选中第一个
watch(() => props.accounts, (newAccounts) => {
  if (newAccounts && newAccounts.length > 0) {
    selectedAccountId.value = newAccounts[0].id;
  }
}, { immediate: true });

// 监听显示状态变化，重置选中状态
watch(() => props.show, (newShow) => {
  if (newShow && props.accounts && props.accounts.length > 0) {
    selectedAccountId.value = props.accounts[0].id;
  }
});

// 切换账户选择状态
function toggleAccountSelection(account: AccountOption) {
  selectedAccountId.value = account.id;
}

// 处理确认选择
function handleConfirm() {
  if (!selectedAccountId.value) {
    uni.$u.toast('请选择一个账户');
    return;
  }

  const selectedAccount = props.accounts.find((account: AccountOption) => account.id === selectedAccountId.value);
  if (!selectedAccount) {
    uni.$u.toast('选择的账户无效');
    return;
  }

  emit('confirm', selectedAccount);
}

// 处理取消
function handleCancel() {
  emit('cancel');
}

// 处理关闭
function handleClose() {
  emit('update:show', false);
}
</script>

<style lang="scss" scoped>
.account-selector {
  padding: 50rpx 40rpx 40rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .selector-header {
    text-align: center;
    margin-bottom: 40rpx;

    .selector-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }

    .title-underline {
      width: 60rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #07c160, #4cd964);
      border-radius: 3rpx;
      margin: 0 auto;
    }
  }

  .account-list {
    margin-bottom: 40rpx;

    .account-item {
      display: flex;
      align-items: center;
      padding: 30rpx 25rpx;
      margin-bottom: 20rpx;
      background-color: #f8f9fa;
      border-radius: 16rpx;
      transition: all 0.3s;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &.selected {
        background-color: #e8f5e8;
        border: 2rpx solid #07c160;
      }

      &:active {
        transform: scale(0.98);
      }

      .account-avatar {
        width: 80rpx;
        height: 80rpx;
        background: linear-gradient(135deg, #07c160, #4cd964);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 25rpx;
        flex-shrink: 0;

        .avatar-text {
          color: #fff;
          font-size: 28rpx;
          font-weight: 600;
        }
      }

      .account-info {
        flex: 1;

        .account-store {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;

          &.no-store {
            color: #999;
            font-weight: 400;
          }
        }

        .account-mobile {
          font-size: 28rpx;
          color: #666;
        }
      }

      .account-check {
        margin-left: 20rpx;
        flex-shrink: 0;

        .check-icon {
          color: #07c160;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }

  .selector-actions {
    display: flex;
    gap: 20rpx;

    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 32rpx;
      border-radius: 44rpx;
      transition: all 0.3s;

      &.cancel-btn {
        background-color: #f5f5f5;
        color: #666;

        &:active {
          background-color: #e8e8e8;
        }
      }

      &.confirm-btn {
        background: linear-gradient(90deg, #07c160, #4cd964);
        color: #fff;
        font-weight: 600;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
